<template>
	<!-- 	<List :msg="msg" @fn="changeHome"></List>
	这是父亲原始值:{{ n }}
	<hr /> -->
	<List v-model:num="num"></List>
	<div>
		<!-- 兄弟传值子A==>父亲==>子B -->
		<!-- 		<A @fn="changeFn"></A>
		<B :str="str"></B> -->
		<!-- 兄弟传值子A==>子B -->
		<A></A>
		<B></B>
	</div>
</template>

<!-- 这是vue2写法 -->
<!-- <script type="text/javascript">
import List from '@/components/List.vue';
export default {
	data() {
		return {
			msg: '这是父亲传儿子的数据',
			n: 0
		};
	},
	components: {
		List
	},
	methods: {
		changeHome(n) {
			this.n = n;
			console.log(n);
		}
	}
};
</script> -->

<!-- 这是vue2+vue3写法 -->
<!-- <script type="text/javascript">
import List from '@/components/List.vue';
export default {
	components: {
		List
	},
	setup() {
		let changeHome = n => {
			console.log(n.value);
		};
		return {
			changeHome
		};
	}
};
</script> -->

<!-- vue3写法 -->
<!-- <script setup>
import List from '@/components/List.vue';
let msg = ref('这是父亲传过去的数据'); //ref响应式数据

const changeHome = n => {
	console.log(n.value);
};
</script> -->

<!-- 双向绑定 -->
<script setup>
import List from '@/components/List.vue';
import A from '@/components/A.vue';
import B from '@/components/B.vue';
// let num = ref(1);

// 兄弟传值子A==>父亲==>子B
// let str = ref('');
// const changeFn = n => {
// 	str.value = n.value;
// 	console.log(n.value);
// };
</script>

<style></style>
